<template>
	<div class="happy-bottomnavigationbar_outside">
		<div class="background">
			

<div class="activity_block">
			<div v-for="(item,index) in listitem" style="display: inline-block;" :key="index">
			<div  :class="['activity_item',item.Loading_completed&&item.isclick?'listhappen':(!item.Loading_completed&&!item.isclick?'temp_listclose':(!item.Loading_completed&&item.isclick?'temp_listhappen':'listclose'))]">
				<div class="activity_item_background">
					<div :class="['activity_item_son',item.Loading_completed&&item.isclick?'listsonhappen':(!item.Loading_completed&&!item.isclick?'temp_listsonhappen':(!item.Loading_completed&&item.isclick?'temp_listsonclose':'listsonclose'))]">
										<div class="activity_item_son_background"></div>
						<image :style="{width:`calc(${item.width} + 20rpx)`,height:`calc(${item.height} + 20rpx)`}" :src="item.activity_icon"></image>
					</div>
					<p>{{item.title}}</p>
				</div>
			</div>
			</div>
			</div>
			
			<div class="list-item" v-for="(item,index) in listitem" @click="choose_item(index)">
				<div v-if="!item.isclick" :class="[item.Loading_completed?'default_iconappear':'']" :style="{opacity:item.Loading_completed?0:1}">
	
				<image :style="{width:item.width,height:item.height}" :src="item.default_icon"></image>
				<text >{{item.title}}</text>
				</div>
			</div>

		</div>
		

	</div>
</template>
<script setup>
	import {
		ref,
		defineProps,
		defineEmits
	} from 'vue'
	
	
	//let Loading_completed=ref(false)
	
	const props = defineProps({
		listitem: Object
	});
	
	const listitem = ref([])
	const emits = defineEmits(['clickindex'])
	listitem.value=props.listitem
	
	let frist_load=null
	listitem.value.map((item,index)=>{
		item.Loading_completed=false
		if(item.isclick){
			frist_load=index
		}
	})

	
	const choose_item=(index)=>{
		if(frist_load!=null){
			listitem.value[frist_load].Loading_completed=true
			frist_load=null
		}
		listitem.value[index].Loading_completed=true
		emits('clickindex', index)
		listitem.value[index].isclick=true
		listitem.value.map((item1,index1)=>{
			if(index1!=index){
				item1.isclick=false
			}
		})
	}
</script>
<style lang="scss" scoped>
	$theme_color:lightgreen;
	
	
	.activity_block{
		position: absolute;
		width: 100%;
		height:150rpx;
		display: flex;
		justify-content: space-around;

	}
	.activity_item{
		

		.activity_item_background{
			position: relative;
			width: 208rpx;
			height: 150rpx;
			border-radius: 70%;
			background-color: white;
			margin-top: -20rpx;
			p{
				width: 120%;
				text-align: center;
				position: absolute;
				color: $theme_color;
				left: 50%;
				transform: translateX(-50%);
				top: 110rpx;
				font-size: 25rpx;
				letter-spacing: 2rpx;
				font-weight: bold;
			}
			
			.activity_item_son{
				position: absolute;
				left: 50%;
				transform: translateX(-50%);
				width: 120rpx;
				height: 120rpx;
				background-color: white;
				box-shadow: 0 0 10px $theme_color;
				border-radius: 50%;
				top: -10%;
				display: flex;
				justify-content: center;
				align-items: center;
				
				.activity_item_son_background{
					position: absolute;
					left: 50%;
					top: 50%;
					transform: translate(-50%,-50%);
					width: 80rpx;
					height:80rpx;
					background-color:#e7e7e7;
					border-radius: 50%;
					z-index: 200;
					box-shadow: 0 0 10px $theme_color;
				}
				
				image{
					position: absolute;
					z-index: 1000;
				}
				
			}
		}
	}
	.happy-bottomnavigationbar_outside {
		position: fixed;
		width: 100%;
		// height: 30rpx;
		bottom: 0;

		.background {
			position: relative;
			width: 100%;
			height: 120rpx;
			background-color: white;
			display: flex;
			justify-content: space-around;
			align-items: center;

			.list-item {
				position: relative;
				width: 100rpx;
				height: 85%;
				display: flex;
				justify-content: center;
				flex-wrap: wrap;
				// background-color: red;
				align-items: center;


				image {
					position: relative;
					width: 90rpx;
					height: 90rpx;
					margin-top: -20rpx;
					// background-color: blue;
				}

				text {
					width: 120%;
					text-align: center;
					background-color: white;
					left: 50%;
					transform: translateX(-50%);
					position: absolute;
					margin-top: -16rpx;
					color: darkgray;
					font-size: 15rpx;
					letter-spacing: 2rpx;
					bottom: 0;
				}
			}
		}
	}
	.listhappen{
		animation: listhappen 0.5s forwards;
	}
	.listclose{
		animation: listclose 0.5s forwards;
	}
	.temp_listhappen{
		visibility:visible;
	}
	.temp_listsonhappen{
		top: -10%;
		box-shadow: 0 0 10px $theme_color;
	}
	.temp_listclose{
		visibility:hidden;
		//opacity: 0;
	}
	.temp_listsonclose{
		top: 10%;
		box-shadow: 0 0 2px #eaeaea;	
	}
	.listsonhappen{
		animation: listsonhappen 0.7s ease forwards;
	}
	.listsonclose{
		animation: listsonclose 0.7s ease forwards;
	}
	
	.default_iconappear{
		animation:0.8s defaulticonappear 0.5s ease forwards;
	}
	
	@keyframes defaulticonappear{
		from{
			opacity: 0;
		}
		to{
			opacity: 1;
		}
	}
	
	@keyframes listsonhappen{
		0%{
			top: 10%;
			box-shadow: 0 0 2px #eaeaea;		
		}
		
		50%{
			top: -10%;
			box-shadow: 0 0 2px #eaeaea;
		}
		
		100%{
			top: -10%;
			box-shadow: 0 0 10px $theme_color;
		}

	}
	
	@keyframes listsonclose{
		0%{
			top: -10%;
			box-shadow: 0 0 10px $theme_color;
		}
		
		50%{
			top: -10%;
			box-shadow: 0 0 2px #eaeaea;
		}
		
		100%{
			top: 10%;
			box-shadow: 0 0 2px #eaeaea;		
		}
	
	}
	
	@keyframes listhappen{
		0%{
			transform: translateY(30rpx);
			visibility:visible;
		}
		60%{
			transform: translateY(-10rpx);
			visibility:visible;
		}
		100%{
			transform: translateY(0rpx);
			visibility:visible;
		}
	}
	@keyframes listclose{
		0%{
			transform: translateY(0rpx);
			visibility:visible;
			opacity: 1;
		}
		60%{
			transform: translateY(-10rpx);
			visibility:visible;
			opacity: 1;
		}
		90%{
			transform: translateY(30rpx);
			visibility:visible;
			opacity: 0;
		}
		100%{
			transform: translateY(30rpx);
			visibility:hidden;
			opacity: 0;
		}
	}
</style>